<template>
  <section>
    <div class="toolbar">
      <el-form :inline="true">
        <el-form-item label="请选择产品模型">
          <el-select @change="change" v-model="goods.type_id" size="small" placeholder="请选择产品模型">
            <el-option
              v-for="item in types"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-button style="float:right;" :loading="loading" :disabled="!goods.id" type="primary" @click="save">保存</el-button>
      </el-form>
    </div>
    <el-row :gutter="2" style="margin-top:20px;">
      <el-col :span="7">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>产品规格</span>
          </div>
          <el-table
            id="table"
            :data="specs"
            border>
            <el-table-column
              width="80"
              align="right"
              prop="name"
              label="规格名称">
            </el-table-column>
            <el-table-column
              label="可选值">
              <template slot-scope="scope">
                <el-checkbox-group v-model="goodsSpecItems[scope.row.id]"  size="small">
                  <div
                    class="box"
                    v-for="item in scope.row.items"
                    :key="item.id"> 
                    <el-checkbox :label="item.id" @change="getSpecPriceInput">
                      {{item.item}}
                    </el-checkbox>
                    <span class="spec-img">
                    <img v-if="item.image && item.image.thumb" :src="item.image.thumb" @click="uploadSpecImg(item)" alt="">
                      <i v-else class="el-icon-picture" @click="uploadSpecImg(item)"></i>
                    </span>
                  </div>
                </el-checkbox-group>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="11">
        <el-card>
          <div slot="header" class="clearfix">
            <span>产品价格</span>
          </div>
          <el-table :data="specPriceInput" border>
            <el-table-column
              v-for="(spec, i) in specHeader"
              :key="i"
              :prop="'items.' + i"
              :label="spec">
            </el-table-column>
            <el-table-column
              label="价格">
              <template slot-scope="scope">
                <el-input v-model="scope.row.price" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="库存">
              <template slot-scope="scope">
                <el-input type="number" required v-model="scope.row.stock" size="mini"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>产品属性</span>
          </div>
          <el-table
            :data="attrs"
            border>
            <el-table-column
              width="80"
              align="right"
              prop="name"
              label="属性名称">
            </el-table-column>
            <el-table-column
              label="属性值">
              <template slot-scope="scope">
                <template v-if="scope.row.input_type === 'SELECT'">
                  <el-select size="mini" v-model="scope.row.value">
                    <el-option
                      v-for="item in scope.row.values"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </template>
                <template v-if="scope.row.input_type === 'INPUT'">
                  <el-input size="mini" v-model="scope.row.value"></el-input>
                </template>
                <template v-if="scope.row.input_type === 'TEXTAREA'">
                  <el-input size="mini" type="textarea" v-model="scope.row.value"></el-input>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!-- dialog -->
    <el-dialog width="350px" class="dialog" title="规格图片" :visible.sync="visible">
      <el-upload
        class="uploader"
        accept="image/*"
        :action="$serverUrl + '/api/upload/specImage'"
        name="file"
        :data="{goods_id: goods.id, spec_item_id: item.id, width: 300, height: 250}"
        :show-file-list="false"
        :on-success="handleUploadSuccess"
        :before-upload="beforeUpload">
        <img v-if="item && item.image" :src="item.image.thumb" class="upload-thumb">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-dialog>    
  </section>
</template>
<script>
  export default {
    data () {
      return {
        loading: false,
        editLoading: false,
        visible: false,
        attrs: [],
        specs: [],
        item: {},
        goodsSpecItems: [],
        specPriceInput: [],
        specHeader: [],
        types: [],
        specGoodsImg: {
          goods_id: null,
          spec_item_id: null,
          thumb: ''
        },
        sortKeyArr: []
      }
    },
    mounted () {
      this._getTypes()
    },
    props: ['goods'],
    methods: {
      change (typeId) {
        this.getAttrs(typeId, this.goods.id)
      },
      save () {
        if (!this.goods.id) {
          this.$message.error('请先完善产品信息')
          return false
        }
        this.loading = true
        this.$http.put('/goods/' + this.goods.id + '/attrs', {attrs: this.attrs, type_id: this.goods.type_id, specPrices: this.specPriceInput})
        .then((response) => {
          this.loading = false
          this.$message.success('保存成功')
        }).catch((error) => {
          this.loading = false
          console.log(error)
        })
      },
      getAttrs (typeId, goodsId) {
        this.$http.get('/attrs/byTypeAndGoods?type_id=' + typeId + '&goods_id=' + goodsId).then((response) => {
          console.log(response.data)
          this.attrs = response.data
        }).catch((error) => {
          console.log(error)
        })
        this.$http.get('/specs/byTypeAndGoods?type_id=' + typeId + '&goods_id=' + goodsId).then((response) => {
          console.log(response.data)
          this.specs = response.data.specs
          this.goodsSpecItems = response.data.goodsSpecItems
          this.getSpecPriceInput(null)
        }).catch((error) => {
          console.log(error)
        })
      },
      getSpecPriceInput (newValue) {
        this.$http.post('/specs/specPriceInput', {goodsSpecItems: this.goodsSpecItems, goods_id: this.goods.id})
        .then((response) => {
          this.specPriceInput = response.data.specPriceInput
          this.specHeader = response.data.specHeader
          this.sortKeyArr = response.data.sortKeyArr
        }).catch((error) => {
          console.log(error)
        })
      },
      uploadSpecImg (item) {
        if (!this.goods || !this.goods.id) {
          this.$message.error('请先完善产品的基本信息')
          return false
        }
        this.item = item
        this.visible = true
      },
      handleUploadSuccess (res, file) {
        console.log(res)
        this.visible = false
        this.item.image = res
      },
      beforeUpload (file) {
        const isLt1M = file.size / 1024 / 1024 < 1
        if (!isLt1M) {
          this.$message.error('上传头像图片大小不能超过 1MB!')
        }
        return isLt1M
      },
      _getTypes () {
        this.$http.get('/types?page_size=1000').then((response) => {
          this.types = response.data.data
        }).catch((error) => {
          console.log(error)
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  .el-select {
    width: 100%;
  }
  .box {
    line-height: 40px;
    color: #67c23a;
    height: 40px;
    .spec-img {
      margin-left: 5px;
      font-size: 18px;
      cursor: pointer;
      img {
        width: 20px;
        vertical-align: middle;
      }
    }
  }
  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 280px;
    line-height: 280px;
    text-align: center;
  }
  .avatar-uploader-icon:hover {
    border-color: #20a0ff;
  }
  .upload-thumb {
    width: 300px;
    height: 280px;
    display: block;
  }
</style>